/*
  学习目标：props的两大特点 - 单项数据流
  1. props可以传递任意数据类型: 💥函数 💥JSX
  2. props是只读的, 单项数据流
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <Footer
          fn={() => {
            alert(132);
          }}
          element={<i>我想歪了</i>}
          name="zs"
          list={[1, 2, 3]}
        ></Footer>
      </div>
    );
  }
}

function Footer(props) {
  return (
    <div>
      <h1>Footer - {props.name}</h1>

      {props.list.map((item) => (
        <i key={item}>{item}</i>
      ))}
      <button
        onClick={() => {
          //💥 props是只读的, 单项数据流, 比vue的单项数据流更加严格
          props.list.push(4);
        }}
      >
        点我修改props
      </button>
    </div>
  );
}
